<!--聊天页面 , 用于与用户进行聊天-->
<template>
  <div>
    <div id="son1">
      <div class="app3">
        <GeminiScrollbar autoshow class="my-scroll-bar">
          <el-menu>
            <span class="span1">聊天列表</span>
            <!--          遍历用户的朋友列表 , 进行展示用户的朋友列表-->
            <div v-if="conversation.length!= 0 ? true : false">
              <div v-for="(conve,index) in conversation" :key=index @click="CatchIndex = index">
                <Cli :info="conve"></Cli>
              </div>
            </div>
          </el-menu>
        </GeminiScrollbar>
      </div>
    </div>
    <div class="son2">
      <div v-if="CatchIndex != null">
        <!--    子路由显示的地方(用户的聊天列表)-->
        <coze :info="this.conversation[CatchIndex]"></coze>
      </div>
    </div>
  </div>
</template>

<script>
import Cli from "@/views/WeChat/Cli";
//引入与用户的聊天列表页面
import coze from "@/views/WeChat/chatCoze/coze";
import {mapGetters} from "vuex";

export default {
  name: "index",
  components: {
    Cli,
    coze
  },
  data() {
    return {
      //当前处于操作中的用户的索引
      CatchIndex: null,
      state1: ''
    }
  },
  methods: {
    //获取会话的函数 ,
    getConversations() {
      this.$store
        .dispatch("message/getConversations")
        .then(() => {
          console.log("会话 , 展示成功");
        })
        .catch((error) => {
          console.log("用户的会话列表 , 展示失败 , 登录错误" + error);
        })
    },
  },
  mounted: function () {
    //初始化WebSocket对象
    this.$store
      .dispatch("user/initWebSocket")

    //  向服务端 , 进行请求,  当前用户的朋友列表 , 以及朋友的详细信息 , 以及聊天记录 , 等等
    this.$store
      .dispatch("user/getFriends")
      .then(() => {
        console.log("朋友列表 , 展示成功");
        //获取会话列表
        this.getConversations();
      })
      .catch((error) => {
        console.log("用户的朋友列表 , 展示失败 , 登录错误" + error);
      })
  },
  computed: {
    //引入用户的会话列表 , 所有的会话列表 ,
    ...mapGetters(['conversation'])
  },
}
</script>

<style scoped>

/*<!--指定第一个 子盒子的大小-->*/
#son1 {
  /*指定子盒子的高度 , 宽度*/
  width: 230px;
  float: left;
  min-height: calc(100vh - 50px);
  /*  指定左边框*/
  border-right: 1px solid #999999;
  box-shadow: 0 3px 5px rgba(250, 250, 250, 1.1);

}

.my-scroll-bar {
  min-height: calc(100vh - 50px);
}

/*<!--子组件的大小-->*/
.son2 {
  /*设置背景图片*/
  background-image: url("wxin.jpg");
  /*图片只显示一张*/
  background-repeat: no-repeat;
  /*使图片居中显示*/
  background-position: center;
  float: left;
  width: calc(100% - 230px);
  min-height: calc(100vh - 50px);
}

.app3 {
  height: 100px;
  /*min-height: calc(100vh - 600px);*/
}

.span1 {
  font-size: 11px;
  padding-right: 170px;
}
</style>
